<template>
    <view class="cart-container">
        <!-- 地址组件 -->
        <my-address></my-address>
        <!-- 标题 -->
        <view class="cart-title">
            <uni-icons type="shop" size="18"></uni-icons>
            <text class="cart-title-text">购物车</text>
        </view>
        <!-- uni-swipe-action 最外层包裹性质的容器 -->
        <uni-swipe-action>
            <block v-for="(goods , i) in cart" :key="i">
                <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
                <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods)">
                    <my-goods :goods="goods" :showRadio="true" :showNum="true" @radio-change="radioChangeHandler"
                        @num-change="numberChangeHandler"></my-goods>
                </uni-swipe-action-item>
            </block>
        </uni-swipe-action>
        <!-- 结算组件 -->
        <my-settle></my-settle>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    import badgeMix from '../../mixins/tabbar-badge.js';

    export default {
        mixins: [badgeMix],
        computed: {
            ...mapState('m_cart', ['cart'])
        },
        data() {
            return {
                options:[{
                    text: '删除',
                    style: {
                        backgroundColor: '#C00000'
                    }
                }]
            }
        },
        methods: {
            ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount','removeGoodsById']),
            // 勾选触发
            radioChangeHandler(e) {
                this.updateGoodsState(e)
            },
            // 同步总数量
            numberChangeHandler(e) {
                this.updateGoodsCount(e)
            },
            // 点击滑动删除
            swipeActionClickHandler(goods){
                this.removeGoodsById(goods.goods_id)
            }

        }
    }
</script>

<style lang="scss">
    .cart-container{
        padding-bottom: 50px;
    }
    .cart-title {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 5px;
        border-bottom: 1px solid #efefef;

        .cart-title-text {
            margin-left: 10px;
        }
    }
</style>
